<template>
    <Scroll>
        <div class="address-wrapper">
        </div>
        <div class="bg">
            <div class="content-wrapper">
                <ul class="address-table">
                    <li v-for="(k,v) in list" :key="v" v-bind:class="{weight:v===0}">
                        <div>{{k.province}}</div>
                        <div>{{k.city}}</div>
                        <div>{{k.region}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="qrcode">
            <div style="margin-right:15px">
                <img src="https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/qrcode-app.png"/>
                <div>充电APP</div>
            </div>
            <div>
                <img src="https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/qrcode-wx.png"/>
                <div>微信公众号</div>
            </div>
        </div>
    </Scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from '../../../components/scrollNew/scroll'
export default {
    name: 'addressInfo',
    data () {
      return {
        list: window.address.list
      }
    },
    components: {
      Scroll
    },
    mounted () {

    }
}
</script>

<style rel="stylesheet/stylus" lang="stylus">
    @import '../../../assets/css/mixin.styl';
    .address-wrapper
      width 100%
      height rpx(1046)
      background url('https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/bg.png') no-repeat
      background-size 100% 100%
    .bg
     background #fecb00
     padding-bottom rpx(40)
     .content-wrapper
      font-size rpx(16)
      background: #f3eac9;
      margin: 0 rpx(32.5);
      padding-bottom rpx(25)
      border-radius 0 0 rpx(28) rpx(28)
      .address-table
       width rpx(620)
       margin 0 auto
       text-align left;
       & li
        position relative
        display flex
        line-height 1.96
        &:first-child
         font-weight 900
         font-size rpx(22)
        &:not(:last-child)::after
          content: ''
          position: absolute
          bottom: 0
          left: 0
          right : 0
          border-bottom: 1px solid #000
          box-sizing border-box
          width: 200%;
          height: 200%;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
        >div:first-child
          width rpx(110)
          flex 0 0 rpx(110)
          margin-left rpx(10)
        >div:nth-child(2)
          flex 0 0 6em
        >div:nth-child(3)
          flex 1
    .qrcode
      height rpx(260)
      display flex
      align-items center
      justify-content center
      img
       width rpx(132)
       height rpx(132)
      div
       font-size 12px
</style>
